<template>
  <div class="hello">
    <el-table
      :data="ptPartDetail"
      style="width: 100%"
      border
      @sort-change="handleSortChange"
      :header-cell-class-name="handleHeaderCellClass"
    >
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column
        prop="btno"
        label="物料批号"
        width="120"
        sortable="custom"
      >
      </el-table-column>
      <el-table-column
        prop="btnoLocQty"
        label="库存数量"
        width="120"
        sortable="custom"
      >
      </el-table-column>
      <el-table-column
        prop="productDate"
        label="生产日期"
        width="120"
        sortable="custom"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      ptPartDetail: [],
      orderArray: [],
    };
  },
  methods: {
    // 
    handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {
      console.log(row,rowIndex,columnIndex)
      this.orderArray.forEach((element) => {
        if (column.property === element.prop) {
          column.order = element.order;
        }
      });
    },
    // 排序变换时
    handleSortChange({ column, prop, order }) {
      console.log('column',column)
      //order值（ascending、descending、null）对应不同的排序方式
      if (order) {
        //参与排序
        let flagIsHave = false;
        this.orderArray.forEach((element) => {
          if (element.prop === prop) {
            element.order = order;
            flagIsHave = true;
          }
        });
        if (!flagIsHave) {
          this.orderArray.push({
            prop: prop,
            order: order,
          });
        }
      } else {
        //不参与排序
        let orderIndex = 0;
        this.orderArray.forEach((element, index) => {
          if (element.prop === prop) {
            orderIndex = index;
          }
        });
        this.orderArray.splice(orderIndex, 1);
      }
      console.log(this.orderArray, "this.orderArray000");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
